<script>
import { defineComponent, computed } from 'vue'
import { createNamespace } from '../utils'

export default defineComponent({
  name: createNamespace('DataPanel')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true
  },
  props: {
    // [{ label, value }, ...]
    data: Array,
    column: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const colClass = computed(() => {
      const { column, data } = props
      if (!data) return ''
      if (!column) {
        const l = data.length
        if (l < 4) return 'col' + l
        return 'col' + (l % 3 === 0 || l % 3 === 2 ? 3 : 2)
      }
      return 'col' + column
    })

    return { colClass }
  }
})
</script>

<template>
  <div v-if="data && data.length" class="fan-data-panel" :class="colClass">
    <div class="fan-flex fan-data-panel__in">
      <div v-for="(item, index) in data" :key="index"
        class="fan-flex-col fan-justify-center fan-align-center fan-data-panel__item">
        <div class="fan-data-panel__val">{{ item.value }}</div>
        <div class="fan-data-panel__t">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.border() {
  content: "";
  width: 1px;
  height: 31px;
  background: #f5f5f5;
  position: absolute;
  right: 0;
  top: 17px;
}

.fan-data-panel {
  padding: 6px 12px;
  font-size: 12px;

  &.col2 .fan-data-panel__item {
    width: 50%;

    &:nth-child(2n)::after {
      display: none;
    }
  }

  &.col3 .fan-data-panel__item {
    width: 33.33%;

    &:nth-child(3n)::after {
      display: none;
    }
  }

  &.col4 .fan-data-panel__item {
    width: 25%;

    &:nth-child(4n)::after {
      display: none;
    }
  }

  &.col5 .fan-data-panel__item {
    width: 20%;

    &:nth-child(5n)::after {
      display: none;
    }
  }

  &__in {
    padding: 5px 0;
    background: #fff;
    border-radius: 8px;
  }

  &__item {
    height: 65px;
    position: relative;

    &::after {
      .border()
    }

    &:last-child::after {
      display: none;
    }
  }

  &__val {
    color: rgba(0, 0, 0, .85);
    font-weight: 700;
    font-size: 1.5em;
  }

  &__t {
    color: #999;
    margin-top: 3px;

  }
}
</style>